<template>
  <a-form-model :rules="rules" ref="validateForm" layout="vertical" :model="formData">
    <a-row :gutter="20">
      <a-col :md="12" :sm="24">
        <a-form-model-item prop="name" label="姓名">
          <!-- {{userInfo.name}} -->
          <a-input v-model="formData.name" :maxLength="30" readOnly/>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item prop="account" label="工号">
          <!-- {{userInfo.account}} -->
          <a-input v-model="formData.account" :maxLength="10" readOnly/>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="20">
      <a-col :md="12" :sm="24">
        <a-form-model-item :label="$t('联系电话')" prop="phone">
          <a-input v-model="formData.phone" :maxLength="11"/>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item :label="$t('比亚迪企业邮箱')" prop="email">
          <!-- {{userInfo.email}} -->
          <a-input v-model="formData.email" :maxLength="50" readOnly/>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :md="16" :sm="24">
        <a-form-model-item :label="'问题类型:'" prop="questionType">
          <a-select
            v-model="formData.questionType"
            :allowClear="true"
            :filterOption="$commonFun.filterOption"
            :placeholder="$t('pleaseSelect') + $t('businessType')"
            :showSearch="false"
          >
            <!-- <a-select-option v-for="item in businessSlectOptions" :key="item.value" >{{ item.name }}</a-select-option> -->
            <a-select-option key="1" value="1" title="1">
              平台功能使用疑问
            </a-select-option>
            <a-select-option key="2" value="2" title="2">
              平台功能优化建议
            </a-select-option>
            <a-select-option key="3" value="3" title="3"> 功能缺陷反馈</a-select-option>
            <a-select-option key="4" value="4" title="4"> 其他</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <!--            </a-row>-->
      <!--            <a-row>-->
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('remark')" prop="feedbackContent">
          <RichTextEditor v-model="formData.feedbackContent" :max="500"/>
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>

<script>
  import {mapState} from 'vuex'
  import CustomTextArea from '@/components/CustomTextArea/index.vue'
  import {checkEmail, checkPhone, checkTextLen,} from '@/utils/validate'
  import RichTextEditor from '@comp/RichTextEditor'

  export default {
    name: 'UserQuestionForm',
    components: {
      CustomTextArea,RichTextEditor
    },
    computed: {
      ...mapState({
        userInfo: (state) => state.user.userInfo,
      }),
    },
    data() {
      return {
        saving: false,
        formData: {
          account: '',
          email: '',
          name: '',
          phone: '',
          feedbackContent: '',
          questionType: undefined,
        },
        rules: {
          account: [
            {required: true, message: this.$t('pleaseInput')},
          ],
          name: [
            {required: true, message: this.$t('pleaseInput')},
          ],
          email: [
            {required: true, message: this.$t('pleaseInput')},
            {
              validator: (rule, value, callback) => {
                checkEmail(rule, value, callback)
              },
            },
            {validator: checkTextLen()},
          ],
          phone: [
            {required: true, message: this.$t('pleaseInput')},
            {validator: checkPhone},
            {validator: checkTextLen(11)},
          ],
          feedbackContent: [
            {required: true, message: this.$t('pleaseInput')},
            {validator: checkTextLen(2000)}
          ],
          questionType: [
            {required: true, message: this.$t('pleaseSelect'), trigger: ['change', 'blur']},
          ],
        },
      }
    },
    created() {
      if (!this.userInfo || !this.userInfo.id) {
        this.$message.error("您还没有登录，请登录后填写反馈");
        setTimeout(() => {
          this.$router.push('/user/login?redirect=' + this.$route.fullPath)
        }, 1000);
      } else {
        this.formData.account = this.userInfo.account;
        this.formData.name = this.userInfo.name;
        this.formData.email = this.userInfo.email;
        this.formData.phone = this.userInfo.phone;
      }
    },
    methods: {
      async save() {
        let valid = await this.$refs.validateForm.validate();
        if (!valid || this.saving) {
          return new Promise();
        }
        this.saving = true;
        this.$emit('saving', true);
        return this.$http({
          url: '/user-service/question/add',
          method: 'post',
          data: {
            ...this.formData,
            questionTypes: [this.formData.questionType]
          },
        }).then(() => {
          this.$message.success(this.$t('提交成功'));
        }).finally(() => {
          this.saving = false;
          this.$emit('saving', false);
        });

      },
    },
  }
</script>

<style lang="less" scoped>
  /deep/ .ant-form-item {
    margin-bottom: 10px;
  }
  /deep/.customTextAreaWrap .tip{
    bottom: -15px;
  }
</style>
